<template>
  <div class="home" ref="homeRef">
    <div class="searchBar" v-if="isShowSearchBar">
      <searchBar></searchBar>
    </div>
    <div class="nav-bar">
      <div class="title">云七民宿</div>
    </div>
    <!-- banner -->
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img class="bannerImg" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- location -->
    <div class="location">
      <div class="city" @click="chooseCity">{{ currentCity.cityName }}</div>
      <div class="myLocation">
        <span>我的位置</span>
        <span><img src="@/assets/img/location.png" alt="" /></span>
      </div>
    </div>
    <!-- 选择日期 -->
    <div class="date">
      <!-- 入住时间 -->
      <div class="startDate" @click="showCalendar = true">
        <span>入住</span>
        <h4>{{ startDate }}</h4>

      </div>
      <div class="countDate">共{{ countDays }}晚</div>
      <!-- 离开时间 -->
      <div class="endDate" @click="showCalendar = true">
        <span>离店</span>
        <h4>{{ endDate }}</h4>
      </div>

      <!-- 日期组件 -->
      <van-calendar color="#606af6" @confirm="onConfirm" v-model:show="showCalendar" :show-confirm="false" type="range"
        :round="false" />
    </div>

    <!-- 价格和人数 -->
    <div class="price-people">
      <div class="Price">价格不限</div>
      <div class="number_of_people">人数不限</div>
    </div>
    <div class="keyword">关键字/位置/民宿名</div>

    <div class="keyword-list">
      <ul class="list">
        <li v-for="item, index in hotSuggests" :key="index"
          :style="{ color: item.tagText.color, background: item.tagText.background.color }">
          {{ item.tagText.text }}
        </li>
      </ul>
    </div>

    <!-- 搜索按钮 -->
    <div class="search" @click="searchBtnClick">开始搜索</div>

    <!--首页分类组件 popular-category-recommendation -->
    <homeCategory></homeCategory>


    <!-- 房间列表组件 -->
    <div class="houseListContent">
      <homeListContent></homeListContent>
    </div>
    <!-- home结束 -->
  </div>





</template>

<script>
export default {
  name: "home",
}
</script>

<script setup>
import { ref, watch, computed, onMounted, onActivated } from "vue";
import { storeToRefs } from "pinia";
import useCityStore from "@/stores/modules/cityStore";
import useHomeStore from "@/stores/modules/homeStore";
import { loadAssetImg } from "@/utils/load_assets_img";
import { useRoute, useRouter } from "vue-router";
import { formatDate, getDiffDays } from '@/utils/format-date';

/* 导入首页分类组件 */
import homeCategory from '@/views/home/homeCategory.vue';
/* 导入房间列表页面组件 */
import homeListContent from "@/views/home/houseList/homeListContent.vue"
/* 导入首页顶部搜索框 */
import searchBar from "@/components/home/searchBar.vue"
/* 导入自己封装监听滚动hooks */
import useScroll from "@/hooks/useScroll";
const router = useRouter()



const images = [
  loadAssetImg("banner.jpg"),
  loadAssetImg("banner2.jpg"),

];

//点击城市跳转页面
const chooseCity = () => {
  router.push('/city')
};


//动态展示当前选择城市
const cityStore = useCityStore() //从Store里获取当前选择的城市 是一个对象currentCity{},通过解构获取
const {currentCity} = storeToRefs(cityStore)
console.log('currentCity', currentCity);

/* 日期相关代码 */
//显示首页默认时间
const nowDate = new Date()
const startDate = ref(formatDate(nowDate))


const newDate = new Date().setDate(nowDate.getDate() + 1)
const endDate = ref(formatDate(newDate))

//显示默认是1晚
const countDays = ref(getDiffDays(nowDate, newDate))

console.log(startDate.value, endDate.value);

//日历组件
const showCalendar = ref(false);
const onConfirm = (date) => {
  console.log(date);
  //隐藏日历
  showCalendar.value = false;
  //把选择的新日期赋值
  startDate.value = formatDate(date[0])
  endDate.value = formatDate(date[1])
  //调用函数计算总共的晚数

  countDays.value = getDiffDays(date[0], date[1])
};

/* 首页热门城市的关键字相关代码 */
//导入useHomeStore
const HomeStore = useHomeStore()
//调用useHomeStore的actions获取首页热门城市数据
HomeStore.getHotCityData()
//获取HomeStore的state里hotSuggests数据,解构后会失去响应式 使用storeToRefs()
const { hotSuggests } = storeToRefs(HomeStore)


/* 搜索按钮跳转到搜索页面 */
const searchBtnClick = () => {
  router.push({
    path: '/search',
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      currentCity: currentCity.cityName
    }
  })
}

/* 调用HomeStore的action里getHouseListData()发送请求获取房间数据 */
HomeStore.getHouseListData();


/* 滚动加载更多 */

const { isReachBottom, scrollTop } = useScroll()
watch(isReachBottom, (newValue) => {

  if (newValue) {
    HomeStore.getHouseListData().then(() => {
      isReachBottom.value = false
    })
  }
  console.log(newValue);
});

/* 跳转回home页面时保留原来的滚动条位置 */
onActivated(() => {

  window.scrollTo({
    top: scrollTop.value
  })

})


/* 控制显示吸顶搜索框 */
const isShowSearchBar = computed(() => {
  return scrollTop.value >= 480
});

</script>
 
<style lang="less" scoped>
.home {
  /* height: 100vh;
  overflow-y: auto;
  box-sizing: border-box; */
  box-shadow: 2px 8px 28px rgb(202, 198, 198);
  padding-bottom: 20px;
  /* 日历高度 */
  --van-calendar-popup-height: 100%;

  .searchBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 46px;

    .title {
      color: #606af6;
      font-size: 18px;
      font-weight: 700;
    }
  }

  .banner {
    .van-swipe {
      .van-swipe-item {
        height: 150px;

        .bannerImg {
          width: 100%;
        }
      }
    }
  }

  .location {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;

    .city {
      flex: 1;
      font-size: 14px;
    }

    .myLocation {
      display: flex;
      align-items: center;

      span {
        font-size: 14px;

        img {
          width: 18px;
          height: 18px;
          margin-left: 5px;
        }
      }
    }
  }

  .date {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 44px;
    margin-right: 50px;

    .startDate {
      margin-right: 20px;

      span {
        font-size: 12px;
        color: #999;
      }

      h4 {
        font-size: 15px;
        font-weight: normal;
        color: #333;
      }
    }

    .countDate {
      font-size: 14px;
      color: #666;
    }

    .endDate {
      margin-left: 20px;


      span {
        font-size: 12px;
        color: #999;
      }

      h4 {
        font-size: 15px;
        font-weight: normal;
        color: #333;
      }
    }




  }

  .price-people {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    color: #999;

    .Price {
      flex: 1;
      padding-left: 20px;
      font-size: 14px;

    }

    .number_of_people {
      flex: 1;
      padding-left: 85px;
      font-size: 14px;
    }

  }

  .keyword {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 40px;
    color: #999;
  }

  .keyword-list {
    padding: 0 12px;

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      color: rgb(63, 73, 84);

      li {
        font-size: 12px;
        margin: 5px;
        padding: 4px 8px;
        text-align: center;
        line-height: 1;
        border-radius: 14px;
        background-color: rgb(241, 243, 245);
      }

    }
  }

  .search {
    font-size: 18px;
    height: 38px;
    line-height: 38px;
    border-radius: 18px;
    margin: 5px 18px;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(90deg, #4aa0f1, #606af6);

  }

  .houseListContent {

    margin-bottom: 60px;
  }

}
</style>